<template>
    <div class="index">
        <!--  -->
        <section class="header">
            <h4 class="title">
                今日注册数
                <span>更新时间：{{form.createTime}}</span>
            </h4>
            <ul>
                <li>
                    <div class="li-main">
                        <div class="li-div">
                            <img src="../../../static/img/2.png" alt="">
                            <div>
                                <p>注册数</p>
                                <h4 class="top-num">{{form.registerNum}}</h4>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="li-main">
                        <div class="li-div">
                            <img src="../../../static/img/3.png" alt="">
                            <div>
                                <p>实名认证数</p>
                                <h4 class="top-num">{{form.authNum}}</h4>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="li-main">
                        <div class="li-div">
                            <img src="../../../static/img/2.png" alt="">
                            <div>
                                <p>申请人数</p>
                                <h4 class="top-num">{{form.borrowNum}}</h4>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="li-main">
                        <div class="li-div">
                            <img src="../../../static/img/1.png" alt="">
                            <div>
                                <p>放款数</p>
                                <h4 class="top-num">{{form.loanNum}}</h4>
                            </div>
                        </div>
                        <!-- <p>
                            昨天全天
                            <span>{{form.authNum}}</span>
                        </p> -->
                    </div>
                </li>
            </ul>
        </section>
        <!--  -->
        <section class="main">
            <h4 class="title">
                数据统计
            </h4>
            <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column prop="createTime" label="日期" :formatter="formatter">
                </el-table-column>
                <el-table-column prop="registerNum" label="注册数" width="150">
                </el-table-column>
                <el-table-column prop="authNum" label="实名认证数" width="120">
                </el-table-column>
                <el-table-column prop="borrowNum" label="申请人数" width="150">
                </el-table-column>
                <el-table-column prop="loanNum" label="放款数">
                </el-table-column>
                <!-- <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            total: 0,
            url: "./static/vuetable.json",
            form: {
                authNum: "",
                borrowNum: "",
                channelId: "",
                loanNum: 0,
                registerNum: 0,
                updateTime: "",
                createTime: ""
            },
            idx: -1,
            current: 1,
            pageSize: 10
        };
    },
    created() {
        //
        let data = { current: this.current, pageSize: this.pageSize };
        this.$.Post("/system/api/channel/finData.htm", data, re => {
            console.log(re);
            this.form = re.data.today;
            this.data = re.data.history;
            this.total=re.data.page.total;
        });
    },
    methods: {
        handleSelectionChange() {},
        //点击选页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.current = val;
            let data = { current: this.current, pageSize: this.pageSize };
            this.$.Post("/system/api/channel/finData.htm", data, re => {
                this.data = re.data.history;
            });
        },
        //时间格式
        formatter(v) {
            return v.createTime;
        }
    }
};
</script>

<style lang="scss">
.index {
    margin: 20px;
    .title {
        border-left: 8px solid #628ff7;
        font-size: 20px;
        line-height: 22px;
        height: 22px;
        font-weight: normal;
        padding: 0 8px;
        color: #6b717e;
        margin-bottom: 20px;
        span {
            float: right;
        }
    }
    .header {
        background-color: white;
        padding: 20px 30px 0;

        ul {
            overflow: hidden;
            font-size: 0;
            li:nth-child(4) {
                border-right: 0;
            }
            li {
                width: 25%;
                font-size: 14px;
                float: left;
                height: 153px;
                padding: 25px 0 20px 0;
                border-right: 4px solid #edf3ff;
                .li-main {
                    width: 207px;
                    margin: 0 auto;
                    > p {
                        margin-top: 35px;
                        color: #b4b8c4;
                        span {
                            float: right;
                            margin-right: 50px;
                        }
                    }
                }
                .li-div {
                    overflow: hidden;
                    img {
                        height: 60px;
                        width: 60px;
                        float: left;
                    }
                    > div {
                        height: 60px;
                        float: left;
                        margin-left: 25px;
                        color: #6b717e;
                        padding: 2px 0;
                    }
                    .top-num {
                        color: #333;
                        font-size: 22px;
                        margin-top: 25px;
                    }
                }
            }
        }
    }

    .main {
        margin-top: 10px;
        background-color: white;
        padding: 30px;
    }
}
</style>
